/**
 * 聚集图
 */
/* 参数示例
 data = {
   data: [
     {
       name:'ccc',
       value:[23,34,23] //前2个位坐标 后面一个值为value
     }
   ],
   // title: '测试',
   name: '',
   showThumbnails：true,
   // textColor: '',
   // iconSize: 5, // 按比例计算，值越大，图标越小，只能为整数  保留字段参数
   // itemColor: '',// 保留字段参数
   // borderColor: 'green',// 保留字段参数
   // borderWidth: '5',//保留字段参数
   // opacity: 1//保留字段参数

 }
*/
import colorPicker from './echarts.colorpicker'; // 颜色初始化配置文件
import sgisLayerBase from '../../sgis.layer.base';
import styleModify from './echarts.stylemodify'; // 图层样式设置文件，包括图层顺序ZIndex,透明度，可见性设置文件
export default {
  activeMap: {}, // 当前活动地图
  clusterLayer: {},
  clusterLayerInfo: {}, // 图层其他相关信息
  /**
   * 创建地图折形图专题图
   */
  createLayer(map, data) {
    if (!map) {
      return;
    }
    if (!data) {
      return;
    }
    this.activeMap = map;
    // const textColor = data.borderColor ? data.borderColor : colorPicker.gather.borderColor;
    const option = {
      color: colorPicker.color,
      title: {
        text: data.title ? data.title : '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter(a) {
          return `${a.name}: ${a.value[2]}`;
        }
      },
      series: [{
        name: data.name ? data.name : '',
        type: 'scatter',
        coordinateSystem: 'leaflet',
        data: data.data,
        symbolSize(val) {
          const size = data.iconSize ? data.iconSize : 5;
          return val[2] / size;
        },
        label: {
          show: true,
          position: 'bottom',
          color: data.color ? data.color : (colorPicker.gather.itemColor ? colorPicker.gather.itemColor : '#fff'),
          formatter: '{b}'
        },
        showEffectOn: 'emphasis',
        effectType: 'ripple',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        itemStyle: {
          color: data.color ? data.color : colorPicker.gather.itemColor,
          borderWidth: data.borderWidth ? data.borderWidth : 2,
          borderColor: data.borderColor ? data.borderColor : colorPicker.gather.borderColor,
          opacity: data.opacity ? data.opacity : 0.8
        },
        emphasis: {
          itemStyle: {
            shadowColor: data.borderColor ? data.borderColor : colorPicker.gather.shadowColor,
            shadowBlur: 20
          }
        }
      }, {
        name: data.name ? data.name : '',
        type: 'scatter',
        coordinateSystem: 'leaflet',
        data: data.data,
        symbolSize(val) {
          const size = data.iconSize ? data.iconSize : 5;
          return val[2] / size;
        },
        label: {
          show: true,
          position: 'inside',
          color: data.color ? data.color : (colorPicker.gather.insideColor ? colorPicker.gather.insideColor : '#fff'),
          formatter(a) {
            let par = a.value[2] + '';
            par = par.substr(0, 1);
            return par;
          }
        },
        showEffectOn: 'emphasis',
        effectType: 'ripple',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        itemStyle: {
          color: data.color ? data.color : colorPicker.gather.itemColor,
          borderWidth: data.borderWidth ? data.borderWidth : 3,
          borderColor: data.borderColor ? data.borderColor : colorPicker.gather.borderColor,
          opacity: data.opacity ? data.opacity : 1
        },
        emphasis: {
          itemStyle: {
            shadowColor: data.borderColor ? data.borderColor : colorPicker.gather.shadowColor,
            shadowBlur: 20
          }
        }
      }]
    };
    this.graph = {
      shadowColor: data.borderColor ? data.borderColor : colorPicker.gather.shadowColor,
      color: data.color ? data.color : colorPicker.gather.itemColor,
      borderColor: data.borderColor ? data.borderColor : colorPicker.gather.borderColor
    };
    this.echartOption = {
      ...option
    }; // 记录echartOption,方便自定义颜色
    this.clusterLayer = L.supermap.echartsLayer({
      ...option
    }).addTo(map);
    this.clusterLayer.setCustomColor = this.setCustomColor;
    this.clusterLayer.setOpacity = this.setOpacity; // 设置图层透明度
    this.clusterLayer.setVisible = this.setVisible; // 设置图层可见性
    this.clusterLayer.setZIndexOffset = this.setZIndexOffset; // 设置调整图层顺序函数;
    const layerId = "cluster_chart_" + data.id + "_" + +new Date();
    styleModify.onZoomScatter(map, this.clusterLayer, layerId); // 由于聚集图在放大平移时均会改变可见性，故有此函数
    this.clusterLayer.layerId = layerId;
    this.clusterLayer.autoCalgraph = this.autoCalgraph;
    this.clusterLayer._echartsContainer.style.zIndex = styleModify.curZindex; // 为设置图层顺序调整特意设置
    styleModify.layerOrder[layerId] = styleModify.curZindex;
    styleModify.curZindex -= 1;
    const clusterlayerInfo = {
      layer: this.clusterLayer,
      layerId,
      type: "cluster",
      name: data.name,
      show: data.showThumbnails !== false,
      html: this.calgraph(layerId)
      // otherLayer: initLayer
    };
    this.clusterLayerInfo = clusterlayerInfo;
    sgisLayerBase.setOverLayers(clusterlayerInfo);
    return clusterlayerInfo;
  },
  /**
   * 聚集图自定义颜色设置
   * @param {object} par{
   *  clusterStyle:{
   * color:
   * borderColor:
   * }
   * }
   */
  setCustomColor(laryer, pars) {
    const echart = laryer._ec;
    const par = {
      ...pars,
      clusterStyle: {
        color: pars.colors[0],
        borderColor: pars.colors[1],
        shadowColor: pars.colors[2]
      }
    };
    const option = {
      ...echart.getOption()
    };
    option.series[0].itemStyle.color = par.clusterStyle.color;
    option.series[1].itemStyle.color = par.clusterStyle.color;
    option.series[0].itemStyle.borderColor = par.clusterStyle.borderColor;
    option.series[1].itemStyle.borderColor = par.clusterStyle.borderColor;
    option.series[0].emphasis.itemStyle.shadowColor = par.clusterStyle.shadowColor;
    option.series[1].emphasis.itemStyle.shadowColor = par.clusterStyle.shadowColor;
    option.series[0].label.color = par.clusterStyle.color;
    option.color.push(par.clusterStyle.color);
    option.color.push(par.clusterStyle.borderColor);
    option.color.push(par.clusterStyle.shadowColor);
    echart.setOption(option);
    this.graph = par.clusterStyle;
    laryer.autoCalgraph(laryer.layerId);
  },
  /**
   *设置图例样式 开始 */
  /**
   * @param {*} layerId 图层id
   */
  calgraph(layerId) {
    let html = `<div style="padding:10px" class="${layerId}">`;
    html += `<div style='width:60px;line-height:60px;text-align:center;border-radius:60px;display:inline-block;height:60px;padding:5px;' onMouseOver='this.style.background="radial-gradient(${this.graph.shadowColor},transparent)";'
    onMouseOut = 'this.style.background="transparent";' >
        <div style = 'width:50px;height:50px;margin:0;padding:0;background:${this.graph.color};border:2px solid ${this.graph.borderColor};border-radius:50px;'> </div>
    </div>`;
    html += `<div style='display:inline-block;margin:0;padding:0;padding-left:5px;line-height:30px;transform:translateY(-20px)'>聚集图</div>`;
    html += '</div>';
    return html;
  },
  /**
   * @param {*} layerId 图层id
   */
  autoCalgraph(layerId) {
    const shadowColor = this.graph.shadowColor ? this.graph.shadowColor : 'rgba(0,0,0,0.8)';
    let html = `<div style="padding:10px" class="${layerId}">`;
    html += `<div style='width:60px;line-height:60px;text-align:center;border-radius:60px;display:inline-block;height:60px;padding:5px;' onMouseOver='this.style.background="radial-gradient(${shadowColor},transparent)";'
    onMouseOut = 'this.style.background="transparent";' >
        <div style = 'width:50px;height:50px;margin:0;padding:0;background:${this.graph.color};border:2px solid ${this.graph.borderColor};border-radius:50px;'> </div>
    </div>`;
    html += `<div style='display:inline-block;margin:0;padding:0;padding-left:5px;line-height:30px;transform:translateY(-20px)'>聚集图</div>`;
    html += '</div>';
    const layers = sgisLayerBase.overLayers;
    for (const key in layers) {
      if (layers[key].layerId === layerId) {
        layers[key].html = html;
      }
    }
    // sgisLayerBase.layerControlChange();
  },
  /* *设置图例样式 结束 */
  /* *设置图层透明度 */
  setOpacity(opacity) {
    this._echartsContainer.style.opacity = opacity;
  },
  /* *设置图层可见性 */
  setVisible(visible) {
    styleModify.setScatterVisible(visible, this.layerId, this._echartsContainer);
  },
  /** 设置调整图层顺序函数*/
  setZIndexOffset(index) {
    styleModify.setZIndexOffset(index, this.layerId, this._echartsContainer);
  }
};
